<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="base.css">
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      a,li{
        list-style: none;
        text-decoration: none;
      }
      body {
        background-color: #f5f5f5;
      }
      button {
        cursor: pointer;
        color: white !important;
        border: none;
        border-radius: 10px;
      }
      #btn {
        width: 188px;
        height: 60px;
        margin: 10px 0 25px 120px;
        border: none;
        color: white;
        background-image:linear-gradient(45deg,#93a5cf 0%, #e4efe9 100%)
      }
      .btncss {
        width: 100px;
        height: 35px;
        background-image:linear-gradient(-225deg,#9EFBD3 0%, #57E9F2 48%, #45D4FB 100%)
      }
      .yin {
        display: none;
        position: fixed;
        top: 3%;
        left: 32%;
        width: 600px;
        height: 500px;
        padding-top: 30px;
        padding-left:15px ;
        padding-right:15px ;
        background-color: #fff;
        z-index: 2;

      }
      .yin #status {
        width: 100%;
        height: 30px;
        border-radius: 5px;
        padding-left: 10px;
        color: gray;
        border: 1px solid #ccc;
        outline: none;
      }
      .yin input{
        margin-top: 10px !important;
      }
      .layer {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        width: 2000px;
        height: 2000px;
        background-color: rgba(0, 0, 0, 0.6);
        z-index: 1;
      }
      .one {
        margin-left: 30px;
        margin-right: 8px;
        color: white;
      }
      #yincang1,#yincang2{
        margin-left: 150px;
        margin-top: 10px;
        color: #fff;
      }
      .sou{
        padding-left: 8px;
        width: 300px;
        height: 45px;
        border: none;
        outline: none;
        margin: 25px 0 30px 120px;
      }
      #su{
        width: 100px ;
        height: 45px;
        border: none;
        background-image:linear-gradient(-225deg,#FF3CAC 0%, #562B7C 52%, #2B86C5 100%)
      }
      table{
        width: 1200px;
        margin:30px 0 0 120px;
        text-align: center;
        border-collapse: collapse;
      }
      table th{
        height: 100px;
      }
      table td{
        height: 120px;
        border:none
      }
      table tr{
        border-bottom: 1px solid #ccc ;
      }
      img{
        width: 100px !important;
        height: 100px !important;
        vertical-align: middle;
      }
      .tishi{
        display: none;
        position: fixed;
        top: 3%;
        left: 40%;
        width: 300px;
        height: 66px;
        color: white;
        font-size: 16px;
        text-align: center;
        line-height: 66px;
        z-index: 9999;
        background-color: rgba(0, 0, 0, 0.1);
      }
      .shanchus{
        width: 60px;
        height: 30px;
        background-image:linear-gradient(-225deg,#FF3CAC 0%, #562B7C 52%, #2B86C5 100%)
      }
      .xspan{
        position: absolute;
        top: 48.5px;
        left:85px;
      }
      #sel1{
        margin:10px 0 0 120px;
        width: 150px;
        height: 45px;
        border: none;
        outline: none;
      }
      #sel2{
        width: 150px;
        height: 45px;
        border: none;
        outline: none;
      }
      #paixu{
        width: 100px;
        height: 45px;
        border: none;
        background-image:linear-gradient(-225deg,#231557 0%, #44107A 29%, #FF1361 67%)
      }
      #box{
        width: 1600px;
        height: 800px;
        overflow-y: auto;
            }
            .form-group{
              margin-bottom: 30px !important;
            }
     .form-control{
              display: block;
              width: 100% !important;
              height: 30px;
              margin-top: 200px !important;
    
            }
            .btn-default{
              width: 120px;
              color: #231557 !important;
            }
            thead tr{
    position: sticky;
    top: -5px;
    background-color: #fff;

            }
            th{
              text-align: center !important;
            }
            .ian{
              cursor: pointer;
              color: blue  !important;
            }
            #xuanzhong{
              position: absolute;
             top: 34px;
             left: 84px;
             width: 80px;
             height: 35px;
             color: skyblue !important;
             font-size: 14px !important;
             border: 1px solid skyblue;
             border-radius: 10px;
             background-color: #f5f5f5ff;
            }
    </style>
     <link rel="stylesheet" href="../bootstrap-3.4.1/dist/css/bootstrap.css" />
     <script src="jquery-3.6.1.min.js"></script>
     <script src="../bootstrap-3.4.1/dist/js/bootstrap.js"></script>
  </head>
  <br>
    <div class="layer"></div>
    <div class="table-responsive" id="box">
    <button id="btn">添加商品</button><br>
    <input type="text" class="sou"  placeholder="搜素名称"> <button id="su" class="sousuo">搜索</button><br>
    <select name="" id="sel1">
      <option value="price">价格</option>
      <option value="stock">库存</option>
      <option value="sold">实际销量</option>
    </select>
    <select name="" id="sel2">
      <option value="asc">升序</option>
      <option value="desc">降序</option>
    </select>
    <button id="paixu">点击排序</button>
    <table>
        <thead>
        <tr>
            <th style="position: relative; width: 150px;"><input type="checkbox" id="all"><button  id="xuanzhong">删除选中</button></th>
            <th>商品</th>
            <th class="ian">价格</th>
            <th class="ian">库存</th>
            <th class="ian">实际销量</th>
            <th>状态</th>
            <th>创建时间</th>
            <th>营销标签</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox"></td>
                <td>苹果</td>
                <td>10</td>
                <td>1</td>
                <td>1</td>
                <td>2001.11.21</td>
                <td style="color:red">新品 热卖 推荐</td>
                <td><a href="javascript:;">删除</a></td>
            </tr>
        </tbody>
    </table>
    <div class="yin">
      <form>
        <div class="form-group has-success has-feedback">
          <input type="text" class="form-control" placeholder="商品链接" /
          id="img">
          <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true" style="display: none;"></span>
        </div>
        <div class="form-group has-success has-feedback">
          <input type="text" class="form-control" placeholder="商品名称" /
          id="usename">
          <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true" style="display: none;"></span>
        </div>
        <div class="form-group has-success has-feedback">
          <input type="text" class="form-control" placeholder="商品价格" /
          id="price">
          <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true" style="display: none;"></span>
        </div>
        <div class="form-group has-success has-feedback">
          <input type="text" class="form-control" placeholder="商品库存" /
          id="stock">
          <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true" style="display: none;"></span>
        </div>
        <div class="form-group ">
          <select id="status">
            <option value="1" selected>商品上架</option>
            <option value="2">商品下架</option></select
          >
        </div>
        <div class="form-group has-success has-feedback">
          <input type="text" class="form-control" placeholder="商品销量" /
          id="sold">
          <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true" style="display: none;"></span>
        </div>
      </form>
      <div id="yincang1">
        <button id="addbtn1"class="btn btn-default">添加商品</button>
        &emsp;&emsp;&emsp;
        <button id="addbtn2" class="btn btn-default">取消添加商品</button>
      </div>
      <div id="yincang2">
        <button id="xiugaibtn1" class="btn btn-default">修改</button>
        &emsp;&emsp;&emsp;
        <button id="xiugaibtn2" class="btn btn-default">取消修改</button>
      </div>
    </div>
    <div class="tishi">666</div>
</div>
  </body>
  <script>
    var xId=null
    $(function () {
      //点击添加商品显示
      $("#btn").click(btnFun);
      //点击添加商品
      $('#addbtn1').click(addbtn1Fun)
      //取消添加商品
      $('#addbtn2').click(addbtn2Fun)
      //修改商品
      $('#xiugaibtn1').click(xiugaibtn1Fun)
      //取消修改
      $('#xiugaibtn2').click(xiugaibtn2Fun)
      //全选
      $('#all').change(allFun)
      //搜索名字寻找
      $('.sousuo').click(sousuoFun)
      //按回车寻找
      $('.sou').keyup(sousuoFun)
      //点击排序
      $('#paixu').click(paixuFun)
      //判断正确错误
      xuanran()

      $('#usename').keyup(usenameFun)
      $('#img').keyup(imgFun)
      $('#price').keyup(priceFun)
      $('#stock').keyup(stockFun)
      $('#sold').keyup(soldFun)

      //鼠标点击修改
      $('tbody').dblclick(tdFun)
      //点击价格 库存 已售排序
      $('.ian').click(ianFun)   

      //删除选中
      $('#xuanzhong').click(xuanzhongFun)
    });
    //删除选中
    function xuanzhongFun(){
      $('tbody input:checked').each(function(index,item){
        var id=$(item).attr('data-id')
     
        $.ajax({
          url:'https://liu.zzgoodqc.cn/goods/delete?id='+id,
          type:'get',
          success:function(res){ 
            console.log(res);
            if(res.code==200){
              tishi('删除成功','green')
              xuanran()
             $('#all').prop('checked',false)
            }
         
          },
          dataType:'json'

        })
      })
    }
    //点击价格 库存 已售排序
    var sort={
        price:'asc',
        stock:'asc',
        sold:'asc',
    }
    function ianFun(){
      console.log($(this).html());
      let types=null
      if($(this).html()=='价格'){
        sort.price=sort.price=='asc'?'desc':'asc'
        types='price'
      }else if($(this).html()=='库存'){
        sort.stock=sort.stock=='asc'?'desc':'asc'
        types='stock'
      }else if($(this).html()=='实际销量'){
        sort.sold=sort.sold=='asc'?'desc':'asc'
        types='sold'
      }
      $.ajax({
        url:'https://liu.zzgoodqc.cn/goods/sort?sort='+sort[types]+'&type='+types,
        type:'get',
        success:function(res){
          console.log(res);
          if(res.code==200){
            tishi('排序成功','green')
            render(res.data)
          }
         
        },
        dataType:'json'
      })
    }
    //已售
    function soldFun(){
      var reg=/^\d+$/
        if($('#sold').val()==''){
          $('#sold').next().removeClass()
           $('#sold').next().addClass('glyphicon glyphicon-remove form-control-feedback').show()
          return false
        }else if(reg.test($('#sold').val())){
          $('#sold').next().removeClass()
          $('#sold').next().addClass('glyphicon glyphicon-ok form-control-feedback').show()
          return true
        }else{
           $('#sold').next().removeClass()
           $('#sold').next().addClass('glyphicon glyphicon-remove form-control-feedback').show()
           return false
        }
    }
    //库存
    function stockFun(){
      var reg=/^\d+$/
        if($('#stock').val()==''){
          $('#stock').next().removeClass()
           $('#stock').next().addClass('glyphicon glyphicon-remove form-control-feedback').show()
          return false
        }else if(reg.test($('#stock').val())){
          $('#stock').next().removeClass()
          $('#stock').next().addClass('glyphicon glyphicon-ok form-control-feedback').show()
          return true
        }else{
           $('#stock').next().removeClass()
           $('#stock').next().addClass('glyphicon glyphicon-remove form-control-feedback').show()
           return false
        }
    }
    //价格
    function priceFun(){
      var reg=/^\d+\.*\d*$/
        if($('#price').val()==''){
          $('#price').next().removeClass()
           $('#price').next().addClass('glyphicon glyphicon-remove form-control-feedback').show()
          return false
        }else if(reg.test($('#price').val())){
          $('#price').next().removeClass()
          $('#price').next().addClass('glyphicon glyphicon-ok form-control-feedback').show()
          return true
        }else{
           $('#price').next().removeClass()
           $('#price').next().addClass('glyphicon glyphicon-remove form-control-feedback').show()
           return false
        }
    }
    //名字确认
    function usenameFun(){
     var reg=/^([\u4e00-\u9fa5]|\w)+$/
        if($('#usename').val()==''){
          $('#usename').next().removeClass()
           $('#usename').next().addClass('glyphicon glyphicon-remove form-control-feedback').show()
          return false
        }else if(reg.test($('#usename').val())){
          $('#usename').next().removeClass()
          $('#usename').next().addClass('glyphicon glyphicon-ok form-control-feedback').show()
          return true
        }else{
           $('#usename').next().removeClass()
           $('#usename').next().addClass('glyphicon glyphicon-remove form-control-feedback').show()
           return false
        }
      }
      //图片
      function imgFun(){
        var reg=/./
        if($('#img').val()==''){
          $('#img').next().removeClass()
           $('#img').next().addClass('glyphicon glyphicon-remove form-control-feedback').show()
          return false
        }else if(reg.test($('#img').val())){
          $('#img').next().removeClass()
          $('#img').next().addClass('glyphicon glyphicon-ok form-control-feedback').show()
          return true
        }else{
           $('#img').next().removeClass()
           $('#img').next().addClass('glyphicon glyphicon-remove form-control-feedback').show()
           return false
        }
      }


    //点击排序
    function paixuFun(){
      console.log();
     let datas={
      page: 1,            
      limit: 1000,
      sort:$('#sel2').val(),
      type:$('#sel1').val(),
     }
     $.ajax({
      url:'https://liu.zzgoodqc.cn/goods/sort',
      type:'get',
      data:datas,
      success:function(res){
          if(res.code==200){
           render(res.data)
           tishi('排序成功','green')
          }else{
            tishi('排序失败','red')
          }
      },
      dataType:'json'
     })
    }
    //搜索名字寻找
    function sousuoFun(event){
      if(event.key=='Enter'||event.type=='click'){
        let datas={
        goods_name:$('.sou').val()
      }
      $.ajax({
        url:'https://liu.zzgoodqc.cn/goods/search',
        type:'post',
        data:datas,
        success:function(res){
          if(res.code==200){
            console.log(res);
            render(res.data)
          }else{
          xuanran()
          }
        },
        dataType:'json'
      })
      }
    }
    //修改商品
    function xiugaibtn1Fun(){
      usenameFun()
        imgFun()
        priceFun()
        stockFun()
        soldFun()
        if(!(usenameFun()&&imgFun()&&priceFun()&&stockFun()&&soldFun())){
          tishi('输入错误了','red')
          return false
        }
      let  datas={
        id:xID,
        goods_name:$('#usename').val(),
        stock:$('#stock').val(),
        price:$('#price').val(),
        status:$('#status').val(),
        sold:$('#sold').val(),
        img:$('#img').val(),
      }
      $.ajax({
        url:'https://liu.zzgoodqc.cn/goods/update',
        type:'post',
        data:datas,
        success:function(res){
          if(res.code==200){
            tishi('老铁,修改成功了','green')
            $('.yin').hide()
            $('.layer').hide()
            $('.yin').hide()
            $('.layer').hide()
            $('#img').val('')
            $('#usename').val('')
            $('#price').val('')
            $('#stock').val('')
            $('#sold').val('')
            xuanran()
          }else{
            tishi('老铁,修改失败','red')
          }
        },
        dataType:'json'
      })
    }
    //取消修改
    function xiugaibtn2Fun(){
      $('.yin').hide()
      $('.layer').hide()
      $('span[aria-hidden=true]').hide()
            $('#img').val('')
            $('#usename').val('')
            $('#price').val('')
            $('#stock').val('')
            $('#sold').val('')
    }
    //全选
    function allFun(){
      $('tbody [type=checkbox]').prop('checked',$('#all').prop('checked'))
    }
    //input点击事件
    function inpsFun(){
   let res=$('tbody [type=checkbox]:checked').length==$('tbody [type=checkbox]').length?true:false
        $('#all').prop('checked',res)
    }
    //删除按钮
    function shanchu(id,index){
      $.ajax({
        url:'https://liu.zzgoodqc.cn/goods/delete?id='+id,
        type:'get',
        success:function(res){
          if(res.code==200){
            tishi('老铁,删除成功了','green')
            $('tbody tr').eq(index).remove()
            xuanran()
          }else{
            tishi('老铁,删除失败','red')
          }
        },
        dataType:'json'
      })
    }
    //点击修改按钮
    function xiugai(id){
      xID=id
      $.ajax({
        url:'https://liu.zzgoodqc.cn/goods/detail?id='+xID,
        type:'get',
        success:function(res){
          if(res.code==200){
            $('.yin').show()
            $('.layer').show()
            $('#yincang1').hide()
            $('#yincang2').show()
            ID=res.data.id
            $('#img').val(res.data.img)
            $('#usename').val(res.data.goods_name)
            $('#price').val(res.data.price)
            $('#stock').val(res.data.stock)
            $('#status').val(res.data.status)
            $('#sold').val(res.data.sold)
          }
        },
        dataType:'json'
      })
    }
    //成功失败提示一下
    var flog=true
    function tishi(obj,bcolor){
      if(flog){
        $('.tishi').show()
      $('.tishi').html(obj)
      $('.tishi').css('color',bcolor)
      setTimeout(function(){
        $('.tishi').hide()
        flog=true
      },2000)
      flog=false
      }
     
    }
      //点击添加商品
      function addbtn1Fun(){
        usenameFun()
        imgFun()
        priceFun()
        stockFun()
        soldFun()
        if(!(usenameFun()&&imgFun()&&priceFun()&&stockFun()&&soldFun())){
          tishi('输入错误了','red')
          return false
        }
        let datas={
        goods_name:$('#usename').val(),
        stock:$('#stock').val(),
        price:$('#price').val(),
        status:$('#status').val(),
        sold:$('#sold').val(),
        img:$('#img').val(),
    }
        $.ajax({
        url:'https://liu.zzgoodqc.cn/goods/add',
        type:'post',
        data:datas,
        success:function(res){
            if(res.code==200){
              tishi('老铁,添加成功了 ','green')
              $('span[aria-hidden=true]').hide()
              xuanran()
            $('.yin').hide()
            $('.layer').hide()
            $('#img').val('')
            $('#usename').val('')
            $('#price').val('')
            $('#stock').val('')
            $('#sold').val('')
            }else{
              tishi('老铁,添加失败 '+res.msg,'red')
            }
        },
        dataType:'json'
      })
      }
    //点击添加商品显示
    function btnFun() {
    $('.yin').show()
    $('.layer').show()
    $('#yincang2').hide()
    $('#yincang1').show()
    }
    //取消添加商品
    function addbtn2Fun(){
        $('.yin').hide()
        $('.layer').hide()
        $('span[aria-hidden=true]').hide()
            $('#img').val('')
            $('#usename').val('')
            $('#price').val('')
            $('#stock').val('')
            $('#sold').val('')
    }
    //渲染ajax
    function xuanran(){
        $.ajax({
        url:'https://liu.zzgoodqc.cn/goods/goodslist',
        type:'get',
        success:function(res){
            render(res.data)
        },
        dataType:'json'
      })
    }
    //渲染页面
    function render(data){
        let html=''
        if(data==''){
          $('tbody').html(`<tr><th style='font-size:30px;color:red;' colspan='8'>暂无数据<th></tr>`)
          return false
        }
        // data.sort(function(a,b){
        //   return b.id - a.id
        // })
        data.forEach(function(item,index){
            html+=`
            <tr>
                <td style="position:relative;"><input onchange="inpsFun()" data-id="${item.id}" type="checkbox"><span class="xspan">${item.id}</span></td>
                <td  class="dian"><img  class="img-thumbnail" src="${item.img}"><span>${item.goods_name}</span> </td>
                <td class="dian" >${item.price}</td>
                <td class="dian">${item.stock}</td>
                <td class="dian">${item.sold}</td>
                <td>${item.status==1?'上架':'下架'}</td>
                <td>${setTer(item.updated_at)}</td>
                <td style="color:red">新品 热卖 推荐</td>
                <td>
                  <button class="shanchus" id="xia" onclick="shangjia(${item.id},${index},${item.status})">${item.status==1?'下架':'上架'}</button>
                  <button class="shanchus" onclick="shanchu(${item.id},${index})">删除</button>
                  <button class="shanchus" onclick="xiugai(${item.id})">修改</button>
                </td>
            </tr> `
        })
        $('tbody').html(html)
    } 
    function shangjia(id,index){
      let status=$('tbody tr').eq(index).children().eq(8).children('#xia').html().includes('下')?2:1
      $.ajax({
        url:'https://liu.zzgoodqc.cn/goods/updateStatus?id='+id+'&status='+status,
        type:'get',
        success:function(res){
          $('tbody tr').eq(index).children().eq(8).children('#xia').html(status==1?'下架':'上架')
          $('tbody tr').eq(index).children().eq(5).html($('tbody tr').eq(index).children().eq(5).html()=='下架'?'上架':'下架')  
        },
        dataType:'json'
      })
    }
    //点击那个修改那个
    function tdFun(){
        var lets=$(event.target)
        if($(event.target).prop('class')=='dian'){
          $(event.target).attr('contenteditable','true')
          $(event.target).focus()
          $(event.target).blur(function(){
          var con=$(this).parents('tr')
             let id=con.children().eq(0).children('span').html()
             let img=con.children().eq(1).children().prop('src')
             let goods_name=con.children().eq(1).children('span').html()
             let price=con.children().eq(2).html()
             let stock=con.children().eq(3).html()
             let sold=con.children().eq(4).html()
             let status=con.children().eq(5).html()=='上架'?1:2
          let data={
              id:id,
              goods_name:goods_name,
              stock:stock,
              price:price,
              status:status,
              sold:sold,
              img:img,
          }
          console.log(data);
          $.ajax({
            url:'https://liu.zzgoodqc.cn/goods/update',
            type:'post',
            data:data,
            success:function(res){
              lets.attr('contenteditable','false')
              tishi('修改成功','green')
            },
            dataType:'json'

          })
        })
        }
       
    }
    //时间转换
    function setTer(time){
        var time=new Date(time)
       var year=time.getFullYear()
        var month=time.getMonth()
        var date=time.getDate()
        date=date<10?'0'+date:date
        var hours=time.getHours()
        hours=hours<10?'0'+hours:hours
        var minutes=time.getMinutes()
        minutes=minutes<10?'0'+minutes:minutes
        var seconds=time.getSeconds()
        seconds=seconds<10?'0'+seconds:seconds
       return year+'-'+month+'-'+date+' '+hours+':'+minutes+':'+seconds
    }
  </script>
</html>
